<template>
  <view class="checkin-container">
    <!-- 顶部导航栏 -->
   <!-- <view class="navbar">
      <view class="back-btn" @click="navigateBack">
        <uni-icons type="left" size="24" color="#333"></uni-icons>
      </view>
      <view class="title">每日签到</view>
      <view class="nav-right"></view>
    </view> -->

    <!-- 用户积分信息 -->
    <view class="points-card">
      <view class="points-info">
        <text class="points-label">当前积分</text>
        <text class="points-value">{{ userPoints }}</text>
        <button class="recharge-btn" @click="showRechargePanel">
          <uni-icons type="add" size="18" color="#fff" class="recharge-icon"></uni-icons>
          充值积分
        </button>
      </view>
      <view class="points-desc">积分可用于兑换商城礼品或抵扣消费</view>
    </view>

    <!-- 签到区域 -->
    <view class="checkin-section">
      <view class="section-header">
        <text class="section-title">每日签到</text>
      </view>
      
      <view class="checkin-main" v-if="!hasCheckedInToday">
        <view class="checkin-btn" @click="handleCheckIn">
          <uni-icons type="checkmark" size="28" color="#fff" class="check-icon"></uni-icons>
          <text class="check-text">立即签到 +{{ dailyPoints }}积分</text>
        </view>
        <text class="checkin-tip">连续签到可获得额外积分奖励</text>
      </view>
      
      <view class="checked-in" v-else>
        <uni-icons type="checkmark-circle" size="36" color="#4cd964" class="checked-icon"></uni-icons>
        <text class="checked-text">今日已签到</text>
        <text class="checked-points">获得 {{ dailyPoints }} 积分</text>
      </view>
      
      <!-- 连续签到奖励 -->
      <view class="streak-rewards">
        <text class="rewards-title">连续签到奖励</text>
        <view class="rewards-progress">
          <view 
            class="reward-step" 
            :class="{ 
              active: currentStreak >= step.day,
              completed: checkedStreaks.includes(step.day)
            }"
            v-for="step in streakSteps" 
            :key="step.day"
          >
            <view class="step-number">{{ step.day }}</view>
            <view class="step-points">+{{ step.points }}积分</view>
            <uni-icons 
              type="checkmark" 
              size="16" 
              color="#fff" 
              class="step-check" 
              v-if="checkedStreaks.includes(step.day)"
            ></uni-icons>
          </view>
        </view>
        <view class="current-streak" v-if="currentStreak > 0">
          <uni-icons type="fire" size="20" color="#ff9500"></uni-icons>
          <text class="streak-text">当前连续签到 {{ currentStreak }} 天</text>
        </view>
      </view>
    </view>

    <!-- 签到日历 -->
    <view class="calendar-section">
      <view class="section-header">
        <text class="section-title">本月签到记录</text>
      </view>
      
      <view class="calendar-weekdays">
        <text class="weekday" v-for="week in weekdays" :key="week">{{ week }}</text>
      </view>
      
      <view class="calendar-days">
        <!-- 空白占位 -->
        <view class="calendar-day empty" v-for="(empty, index) in emptyDays" :key="'empty-' + index"></view>
        
        <!-- 日期 -->
        <view 
          class="calendar-day" 
          :class="{
            checked: isChecked(day),
            today: isToday(day),
            past: isPastDay(day),
            future: isFutureDay(day)
          }"
          v-for="day in daysInMonth" 
          :key="day"
          @click="handleDayClick(day)"
        >
          <text class="day-number">{{ day }}</text>
          <uni-icons 
            type="checkmark" 
            size="16" 
            color="#fff" 
            class="day-check" 
            v-if="isChecked(day)"
          ></uni-icons>
        </view>
      </view>
    </view>

    <!-- 积分充值面板 -->
    <view class="recharge-panel" v-if="showRecharge">
      <view class="panel-header">
        <text class="panel-title">积分充值</text>
        <uni-icons 
          type="close" 
          size="24" 
          color="#666" 
          class="close-btn" 
          @click="hideRechargePanel"
        ></uni-icons>
      </view>
      
      <!-- 充值套餐 -->
      <view class="recharge-packages">
        <view 
          class="package-item" 
          :class="{ selected: selectedPackage === pkg.id }"
          v-for="pkg in rechargePackages" 
          :key="pkg.id"
          @click="selectPackage(pkg.id)"
        >
          <text class="package-points">{{ pkg.points }}积分</text>
          <text class="package-price">¥{{ pkg.price.toFixed(2) }}</text>
          <text class="package-desc" v-if="pkg.discount">省¥{{ pkg.discount }}</text>
          <uni-icons 
            type="check" 
            size="20" 
            color="#fff" 
            class="package-check"
            v-if="selectedPackage === pkg.id"
          ></uni-icons>
        </view>
      </view>
      
      <!-- 支付方式 (仅微信支付) -->
      <view class="payment-method">
        <text class="method-title">支付方式</text>
        <view class="wechat-pay">
          <uni-icons type="weixin" size="32" color="#07C160" class="wechat-icon"></uni-icons>
          <text class="wechat-text">微信支付</text>
          <uni-icons type="checkmark-circle" size="24" color="#07C160" class="wechat-check"></uni-icons>
        </view>
        <text class="pay-tip">* 支持微信零钱、银行卡及支付优惠</text>
      </view>
      
      <!-- 充值按钮 -->
      <button class="confirm-pay-btn" @click="confirmRecharge">
        确认支付 ¥{{ getSelectedPackage().price.toFixed(2) }}
      </button>
    </view>

    <!-- 成功提示弹窗 -->
    <view class="success-popup" v-if="showSuccessPopup">
      <view class="popup-content">
        <view class="popup-icon" :class="popupType === 'checkin' ? 'checkin-icon' : 'recharge-icon'">
          <uni-icons 
            type="checkmark-circle" 
            size="60" 
            color="#fff"
          ></uni-icons>
        </view>
        <text class="popup-title">{{ popupTitle }}</text>
        <text class="popup-desc">{{ popupDesc }}</text>
        <view class="popup-btn" @click="closePopup">完成</view>
      </view>
    </view>

    <!-- 遮罩层 -->
    <view class="mask" v-if="showRecharge || showSuccessPopup" @click="onMaskClick"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 签到相关数据
      userPoints: 850,
      hasCheckedInToday: false,
      dailyPoints: 10,
      currentStreak: 2,
      streakSteps: [
        { day: 1, points: 10 },
        { day: 2, points: 12 },
        { day: 3, points: 15 },
        { day: 4, points: 18 },
        { day: 5, points: 20 },
        { day: 6, points: 25 },
        { day: 7, points: 30 }
      ],
      checkedStreaks: [1, 2],
      checkedDates: [12, 13],
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      daysInMonth: 30,
      emptyDays: 5,
      
      // 充值相关数据
      showRecharge: false,
      rechargePackages: [
        { id: 1, points: 100, price: 10.00 },
        { id: 2, points: 300, price: 28.00, discount: 2.00 },
        { id: 3, points: 500, price: 45.00, discount: 5.00 },
        { id: 4, points: 1000, price: 88.00, discount: 12.00 },
        { id: 5, points: 2000, price: 170.00, discount: 30.00 }
      ],
      selectedPackage: 3,
      
      // 弹窗相关
      showSuccessPopup: false,
      popupTitle: '',
      popupDesc: '',
      popupType: '' // 'checkin' 或 'recharge'
    };
  },
  onLoad() {
    this.initCalendar();
    this.checkTodayStatus();
  },
  methods: {
    // 初始化日历数据
    initCalendar() {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth();
      
      // 获取当月天数
      this.daysInMonth = new Date(year, month + 1, 0).getDate();
      
      // 获取当月第一天是星期几
      const firstDay = new Date(year, month, 1).getDay();
      this.emptyDays = firstDay;
    },
    
    // 检查今日签到状态
    checkTodayStatus() {
      const today = new Date().getDate();
      this.hasCheckedInToday = this.checkedDates.includes(today);
    },
    
    // 处理签到
    handleCheckIn() {
      if (this.hasCheckedInToday) return;
      
      const today = new Date().getDate();
      this.hasCheckedInToday = true;
      this.checkedDates.push(today);
      
      // 更新连续签到天数
      this.currentStreak += 1;
      this.checkedStreaks.push(this.currentStreak);
      
      // 计算获得的积分
      const earnedPoints = this.streakSteps.find(step => step.day === this.currentStreak)?.points || 10;
      this.userPoints += earnedPoints;
      
      // 显示成功弹窗
      this.popupType = 'checkin';
      this.popupTitle = '签到成功';
      this.popupDesc = `获得 ${earnedPoints} 积分，当前连续签到 ${this.currentStreak} 天`;
      this.showSuccessPopup = true;
      
      // 保存数据到本地
      this.saveCheckinData();
    },
    
    // 保存签到数据
    saveCheckinData() {
      const checkinData = {
        hasCheckedInToday: this.hasCheckedInToday,
        currentStreak: this.currentStreak,
        checkedStreaks: this.checkedStreaks,
        checkedDates: this.checkedDates,
        userPoints: this.userPoints
      };
      uni.setStorageSync('checkinData', checkinData);
    },
    
    // 日期点击事件
    handleDayClick(day) {
      if (this.isFutureDay(day)) return;
      
      if (this.isChecked(day)) {
        uni.showToast({
          title: `已在${day}号签到`,
          icon: 'none',
          duration: 1500
        });
      } else if (!this.isToday(day)) {
        uni.showToast({
          title: '只能签到当天日期',
          icon: 'none',
          duration: 1500
        });
      }
    },
    
    // 显示充值面板
    showRechargePanel() {
      this.showRecharge = true;
      // 禁止页面滚动
      document.body.style.overflow = 'hidden';
    },
    
    // 隐藏充值面板
    hideRechargePanel() {
      this.showRecharge = false;
      // 恢复页面滚动
      document.body.style.overflow = 'auto';
    },
    
    // 选择充值套餐
    selectPackage(packageId) {
      this.selectedPackage = packageId;
    },
    
    // 获取选中的套餐
    getSelectedPackage() {
      return this.rechargePackages.find(pkg => pkg.id === this.selectedPackage) || this.rechargePackages[0];
    },
    
    // 确认充值（调用微信支付）
    confirmRecharge() {
      const selected = this.getSelectedPackage();
      
      // 模拟调用微信支付
      // 实际项目中应调用后端接口获取支付参数，再调用uni.requestPayment
      this.mockWechatPayment(selected).then(success => {
        if (success) {
          // 支付成功，更新积分
          this.userPoints += selected.points;
          this.hideRechargePanel();
          
          // 显示成功弹窗
          this.popupType = 'recharge';
          this.popupTitle = '充值成功';
          this.popupDesc = `成功充值 ${selected.points} 积分`;
          this.showSuccessPopup = true;
          
          // 保存数据
          this.saveCheckinData();
        }
      });
    },
    
    // 模拟微信支付过程
    mockWechatPayment(packageInfo) {
      return new Promise(resolve => {
        // 显示加载中
        uni.showLoading({ title: '正在发起支付...' });
        
        // 模拟支付请求延迟
        setTimeout(() => {
          uni.hideLoading();
          
          // 实际项目中应使用以下代码调用微信支付
          /*
          uni.requestPayment({
            provider: 'weixin',
            timeStamp: '', // 后端返回的时间戳
            nonceStr: '', // 后端返回的随机字符串
            package: '', // 后端返回的prepay_id
            signType: 'MD5',
            paySign: '', // 后端返回的签名
            success: () => resolve(true),
            fail: () => resolve(false)
          });
          */
          
          // 模拟支付成功
          resolve(true);
        }, 1500);
      });
    },
    
    // 关闭弹窗
    closePopup() {
      this.showSuccessPopup = false;
    },
    
    // 点击遮罩层
    onMaskClick() {
      if (this.showRecharge) {
        this.hideRechargePanel();
      }
      if (this.showSuccessPopup) {
        this.closePopup();
      }
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack({ delta: 1 });
    },
    
    // 辅助方法：判断日期是否已签到
    isChecked(day) {
      return this.checkedDates.includes(day);
    },
    
    // 辅助方法：判断是否是今天
    isToday(day) {
      return new Date().getDate() === day;
    },
    
    // 辅助方法：判断是否是过去的日期
    isPastDay(day) {
      return day < new Date().getDate();
    },
    
    // 辅助方法：判断是否是未来的日期
    isFutureDay(day) {
      return day > new Date().getDate();
    }
  }
};
</script>

<style lang="scss" scoped>
.checkin-container {
  min-height: 100vh;
  background-color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-bottom: 30rpx;
}

// 导航栏样式
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    flex: 1;
    text-align: center;
  }

  .nav-right {
    width: 60rpx;
  }
}

// 积分卡片样式
.points-card {
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 30rpx;
  color: #fff;

  .points-info {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;

    .points-label {
      font-size: 28rpx;
      opacity: 0.9;
    }

    .points-value {
      font-size: 48rpx;
      font-weight: bold;
      margin: 0 20rpx;
      flex: 1;
    }

    .recharge-btn {
      background-color: rgba(255, 255, 255, 0.3);
      color: #fff;
      border: none;
      border-radius: 25rpx;
      padding: 12rpx 25rpx;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      backdrop-filter: blur(5px);
      transition: all 0.3s;

      &:active {
        background-color: rgba(255, 255, 255, 0.4);
      }

      .recharge-icon {
        margin-right: 8rpx;
      }
    }
  }

  .points-desc {
    font-size: 24rpx;
    opacity: 0.8;
  }
}

// 签到区域样式
.checkin-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 0 30rpx 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .section-header {
    margin-bottom: 30rpx;

    .section-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      position: relative;
      padding-left: 20rpx;

      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 24rpx;
        background-color: #ff7e5f;
        border-radius: 3rpx;
      }
    }
  }

  .checkin-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;

    .checkin-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ff7e5f;
      color: #fff;
      width: 300rpx;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 30rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 5rpx 15rpx rgba(255, 126, 95, 0.3);
      transition: all 0.3s;

      &:active {
        transform: scale(0.98);
        box-shadow: 0 3rpx 10rpx rgba(255, 126, 95, 0.2);
      }

      .check-icon {
        margin-right: 10rpx;
      }
    }

    .checkin-tip {
      font-size: 24rpx;
      color: #999;
    }
  }

  .checked-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;

    .checked-icon {
      margin-bottom: 15rpx;
    }

    .checked-text {
      font-size: 30rpx;
      color: #333;
      margin-bottom: 10rpx;
    }

    .checked-points {
      font-size: 26rpx;
      color: #4cd964;
    }
  }

  // 连续签到奖励
  .streak-rewards {
    margin-top: 30rpx;

    .rewards-title {
      font-size: 26rpx;
      color: #666;
      margin-bottom: 15rpx;
      display: block;
    }

    .rewards-progress {
      display: flex;
      justify-content: space-between;
      overflow-x: auto;
      padding-bottom: 10rpx;

      .reward-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 80rpx;
        padding: 15rpx 5rpx;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        margin-right: 10rpx;

        .step-number {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 5rpx;
        }

        .step-points {
          font-size: 22rpx;
          color: #ff7e5f;
        }

        .step-check {
          display: none;
        }

        &.active {
          background-color: #fff0f0;
          border: 1px solid #ffccc7;
        }

        &.completed {
          background-color: #fff0f0;
          border: 1px solid #ff7e5f;
          position: relative;

          .step-check {
            display: block;
            position: absolute;
            top: -5rpx;
            right: -5rpx;
            background-color: #ff7e5f;
            border-radius: 50%;
            width: 26rpx;
            height: 26rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }

    .current-streak {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20rpx;
      color: #ff9500;
      font-size: 26rpx;

      .streak-text {
        margin-left: 8rpx;
      }
    }
  }
}

// 日历区域样式
.calendar-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 0 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .section-header {
    margin-bottom: 25rpx;

    .section-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      position: relative;
      padding-left: 20rpx;

      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 24rpx;
        background-color: #ff7e5f;
        border-radius: 3rpx;
      }
    }
  }

  .calendar-weekdays {
    display: flex;
    margin-bottom: 15rpx;

    .weekday {
      flex: 1;
      text-align: center;
      font-size: 24rpx;
      color: #999;
    }
  }

  .calendar-days {
    display: flex;
    flex-wrap: wrap;

    .calendar-day {
      width: 14.2857%; // 7天平均分配
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      &.empty {
        // 空白日期
      }

      .day-number {
        width: 56rpx;
        height: 56rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #666;
        transition: all 0.2s;
      }

      &.today .day-number {
        background-color: #f5f5f5;
        color: #ff7e5f;
        font-weight: 500;
      }

      &.checked .day-number {
        background-color: #ff7e5f;
        color: #fff;
        font-weight: 500;
      }

      &.future .day-number {
        color: #ccc;
      }

      .day-check {
        position: absolute;
        bottom: 10rpx;
      }

      &:active .day-number {
        transform: scale(1.1);
      }
    }
  }
}

// 积分充值面板
.recharge-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding: 30rpx;
  z-index: 100;
  animation: slideUp 0.3s ease-out;

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .panel-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }

    .close-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .recharge-packages {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10rpx;
    margin-bottom: 30rpx;
    gap: 15rpx;

    .package-item {
      min-width: 180rpx;
      background-color: #f5f5f5;
      border-radius: 12rpx;
      padding: 20rpx 10rpx;
      text-align: center;
      position: relative;
      transition: all 0.3s;

      .package-points {
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
        display: block;
        margin-bottom: 5rpx;
      }

      .package-price {
        font-size: 24rpx;
        color: #ff7e5f;
        display: block;
        margin-bottom: 8rpx;
      }

      .package-desc {
        font-size: 20rpx;
        color: #4cd964;
        background-color: rgba(76, 218, 80, 0.1);
        padding: 2rpx 10rpx;
        border-radius: 10rpx;
      }

      .package-check {
        position: absolute;
        top: -8rpx;
        right: -8rpx;
        background-color: #ff7e5f;
        border-radius: 50%;
        width: 30rpx;
        height: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
      }

      &.selected {
        background-color: #fff0f0;
        border: 2px solid #ff7e5f;

        .package-check {
          opacity: 1;
        }
      }
    }
  }

  .payment-method {
    margin-bottom: 40rpx;

    .method-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }

    .wechat-pay {
      display: flex;
      align-items: center;
      padding: 20rpx;
      background-color: #f5f5f5;
      border-radius: 12rpx;

      .wechat-icon {
        margin-right: 15rpx;
      }

      .wechat-text {
        font-size: 28rpx;
        color: #333;
        flex: 1;
      }
    }

    .pay-tip {
      font-size: 22rpx;
      color: #999;
      margin-top: 15rpx;
      display: block;
    }
  }

  .confirm-pay-btn {
    width: 100%;
    height: 90rpx;
    background-color: #ff7e5f;
    color: #fff;
    border: none;
    border-radius: 45rpx;
    font-size: 32rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;

    &:active {
      background-color: #ff6a4a;
    }
  }
}

// 成功提示弹窗
.success-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;

  .popup-content {
    width: 500rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 5rpx 30rpx rgba(0, 0, 0, 0.2);
    animation: popupIn 0.3s ease;

    .popup-icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30rpx;
    }

    .checkin-icon {
      background-color: #4cd964;
    }

    .recharge-icon {
      background-color: #ff7e5f;
    }

    .popup-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 15rpx;
    }

    .popup-desc {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 30rpx;
      text-align: center;
    }

    .popup-btn {
      width: 100%;
      height: 80rpx;
      background-color: #ff7e5f;
      color: #fff;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      font-weight: 500;
      transition: all 0.3s;

      &:active {
        background-color: #ff6a4a;
      }
    }

    .popup-btns {
      display: flex;
      width: 100%;
      gap: 20rpx;
      margin-bottom: 10rpx;

      .cancel-btn {
        background-color: #f5f5f5;
        color: #666;
      }
    }
  }
}

// 遮罩层
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  animation: fadeIn 0.3s ease;
}

// 动画效果
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes popupIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
